<template>
  <div class>
    
    <section>
   <!--    <mt-navbar v-model="selected">
        <mt-tab-item id="1" >账号登录</mt-tab-item>
        <mt-tab-item id="2">手机验证登录</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1"> -->
          <div class="user_wrap">
            <div class="user_name">
              <span><img src="" alt=""></span>
              <div class="textwrap">
              <input class="" type="text" name="name" placeholder="手机号/用户名称" required="" id="username" v-model.trim="username">
              </div>
            </div>
            <div class="user_name user_psd">
              <span><img src="" alt=""></span>
              <div class="textwrap">
              <input class="" type="password" name="name" placeholder="密码" required="" id="password" v-model.trim='password'>
              </div>
            </div>
          </div>
          <div class='remind remind1'>
          </div>
          <div class='btn_wrap clearfixed'>
            <button   v-on:click="login">登录</button>
            <div @click = 'forget()' class="forget">忘记密码</div>
          </div>
        <!-- </mt-tab-container-item> -->

        <!-- <mt-tab-container-item id="2"> -->
          <div class="user_wrap">
            <div class="user_name clearfixed">
              <span class="spanwrap"><img src="" alt=""></span>
              <div class="textwrap">
                <input class="" type="tel" name="phoneNum" v-model.trim="items.type1" ref="type1" placeholder="请输入手机号" required="" >
              </div>
            </div>
            <div class="user_name user_psd">
              <span><img src="" alt=""></span>
              <input class="" type="text"  placeholder="请输入验证码" required="" v-model.trim="items.type2" ref="type2">
              <button type="button" v-on:click='getcode' class="getcode getcode1">获取验证码</button>
            </div>

          </div>
          <div class='remind remind2'>
          </div>
            <div class='btn_wrap clearfixed'>
            <button   v-on:click="loginPhone">登录</button>
            <div  class="forget" style='opacity: 0'>忘记密码</div>
          </div>
        <!-- </mt-tab-container-item> -->
      <!-- </mt-tab-container> -->
   
    </section>
  </div>
</template>
<script>
var host = 'http://nasheon.test.dongcaicai.com/';
import axios from 'axios'

export default {
  name: 'login',
  data()  {
    return{
      selected: '1' ,
      username: "",
      password: "",
      bus:'',
      data:'',
      items: {
         type1:'',
         result1:'',
         type2:'',
         result2:'',
      }
    }
  },
  created(){
 },
  mounted(){
    $('section .mint-tab-item-label').css('fontSize','0.8rem');
    $('.mint-field-core').attr('pattern','^(\w){6,20}$').attr('required','required');
    $('.mint-tabbar').hide()
  },
  methods: {
    // 账号登陆
    login(event){
      var el = event.currentTarget;
      $(el).css('background','#fabe1b');
      var time = setTimeout(function(){
        $(el).css('background','#f8b500');
      },500)
        console.log($(el))
        var reg = /^\w{6,20}$/;
        let data = 'name='+this.username+'&passworld='+this.password
        var fh = this;
        axios.post(host+'nasheon/login/login_key.html', data)
        .then(function (data) {
          console.log(data);
          if(data.data.code == 0){
              $('.remind1').html(data.data.msg);
              var el = event.currentTarget;
              $(el).css('background','#fabe1b');
              var time = setTimeout(function(){
                $(el).css('background','#f8b500');
              },500)
          }else{
             // console.log(fh)
           $(el).css('background','#fabe1b');

            $('.remind1').html('');
            // 父级传值
            bus.$emit('userDefinedEvent',data.data.str);

            fh.$router.push('/mine?Id='+data.data.str);
            localStorage.userId = data.data.str;
            localStorage.userName = data.data.data.userName;
            console.log(localStorage.userName)
          }
        })
        .catch(function (data) {
          console.log(data);
        });
    },
  
    // 获取验证码
    getcode() {
      var  reg = /^1[3578]\d{9}$/;
      var phone = this.$refs.type1.value;
      var time = 120;
      if(!reg.test(phone)){
        $('.remind2').html('请输入正确手机号')
      }else{
        $('.remind2').html('')
        // 手机发送验证码
        var fa = this;
        this.$ajax({
          method: 'post',
          url: host+'/nasheon/login/code.html',
          data:  'phone='+phone,
        })
        .then(function (response) {
            console.log(response);   //处理后台返回的数据
            if(response.data == '手机号不存在，请注册'){
               $('.remind2').html(response.data)
            }else{
                $('.remind2').html('');
                // console.log($('.getcode').html());
                $('.getcode1').attr('disabled',true);
                var t = setInterval(function(){
                time--;
                $('.getcode1').html(time+'秒');
                  if(time == 0){
                    clearInterval(t);
                    $('.getcode1').html('获取验证码');
                    $('.getcode1').attr('disabled',false);
                  }
               },1000)

            }
         }) 
        .catch(function(err){
            console.log(err)
        })
      }
    },
      // 手机号登陆
    loginPhone(){
      var el = event.currentTarget;
      $(el).css('background','#fabe1b');
      var time = setTimeout(function(){
        $(el).css('background','#f8b500');
      },500)
      var phoneN = this.$refs.type1.value; // 手机号
      var code = this.$refs.type2.value;  // 验证码
      var fh = this;
      this.$ajax({
          method: 'post',
          url: host+'/nasheon/login/login_phone.html',
          data:  'name='+phoneN + '&passworld=' + code,
        })
        .then(function (response) {
            console.log(response);   //处理后台返回的数据
            if(response.data.code == 0){
              $('.remind2').html(response.data.msg);
              var el = event.currentTarget;
              $(el).css('background','#fabe1b');
              var time = setTimeout(function(){
                $(el).css('background','#f8b500');
              },500)
            }else{
              $('.remind2').html('');
              fh.$router.push('/mine?Id='+response.data.str);
              localStorage.userId = response.data.str;

            }
         }) 
        .catch(function(err){
            console.log(err)
        })
    },
    // 忘记密码
    forget(){
      // alert(0)
        this.$router.push('/forget')
    }
  },
  create: {

  }
}
</script>

<style scoped lang='scss'>
/*@import 'static/scss/login'*/
</style>
